<template>
    <div class="dark-container">
        <van-cell center title="切换主题">
            <template #right-icon>
                <van-switch @change="changeSwitch" v-model="checked"/>
            </template>
        </van-cell>
    </div>
</template>

<script>
import { Switch, Cell } from 'vant';
export default {
    inject: ['switchTheme'],
    components: {
        [Switch.name]: Switch,
        [Cell.name]: Cell
    },
    data() {
        return {
            checked: localStorage.mode ? true : false
        }
    },
    methods: {
        changeSwitch() {
            this.switchTheme()
        }
    }
}
</script>


<style lang="less">
    // 建议theme变量放在全局
    body {
        --primary-bg: #fff;
    }
    body[mode="dark"] {
        --primary-bg: #000;
        --primary-color: #fff;
    }
</style>
<style lang="less" scoped>
    .dark-container {
        width: 100vw;
        height: 100vh;
        background-color: var(--primary-bg);
        /deep/.van-cell {
            background-color: var(--primary-bg);
            span {
                color: var(--primary-color);
            }
        }
    }
</style>

